<template>
	
	<view class="cart-container" >
		<!-- 购物车里有商品时展示该视图 -->
		<view class="full-cart" v-if="cart.length !== 0">
			<!-- 地址组件 -->
			<my-address></my-address>
			
			<!-- 商品列表区域 -->
			<view class="cart-title">
				<!-- 左侧的图标 -->
				<uni-icons type="shop" size="18"></uni-icons>
				<!-- 右侧文本 -->
				<text class="cart-title-text">购物车</text>
			</view>
			
			
			<!-- 滑动操作组件使用 必须放置最外层包裹 -->
			<uni-swipe-action >
				<!-- 循环渲染购物车中的商品信息 -->
				<block v-for="(goods,i) in cart" :key="i">
					<uni-swipe-action-item  :options="options" @click="swipeClickHandler(goods)" @change="swipeChange($event, index)">
							<my-goods @num-change="numChangedHandler" @radio-change="radioChangedHandler" :goods="goods" :showRadio="true" :showNumBox="true"></my-goods>
					</uni-swipe-action-item>
				</block>   
			</uni-swipe-action>
			
			<!-- 自定义结算组件 -->
			<my-settle></my-settle>
		</view>
		
		
		
		<!-- 购物车空空如何展示视图 -->
		<view class="empty-cart" v-else>
			<image class="empty-img" src="/static/cart_empty@2x.png"></image>
			<text class="empty-text">空空如也~</text>
		</view>
	</view>
	
	
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	import { mapState,mapMutations } from 'vuex'
	export default {
		// 注册badgeMix 然后购物车上的数量微标就可以
		// 动态的显示正确的数量
		mixins:[badgeMix],
		computed:{
			...mapState('m_cart',['cart']),
		},
		data() {
			return {
				options:[
				        {
				            text: '删除',
				            style: {
				                backgroundColor: '#C00000'
				            }
						}]
			}
		},
		methods: {
			// 自定义radio-change事件 选中状态发生改变 更新商品的选中状态
			radioChangedHandler(e){
				this.updateGoodsState(e)
				// console.log(e);
			},
			...mapMutations('m_cart',['updateGoodsState','updateGoodsCount','romoveGoodsById']),
			// 自定义num-change事件 数值发生改变 更新商品的数量
			numChangedHandler(e){
				this.updateGoodsCount(e)
				console.log(e);
			},
			// 滑动组件的点击事件 根据商品id删除对应的商品
			swipeClickHandler(goods){
				// console.log(goods);
				this.romoveGoodsById(goods.goods_id)
			},
			swipeChange($event, index){}
		}
	}
</script>

<style lang="scss">
	.cart-title{
		height: 40px;
		display: flex;
		align-items: center;
		padding-left: 5px;
		border-bottom: 1px solid #EFEFEF;
		.cart-title-text{
			font-size: 14px;
			margin-left: 10px;
		}
	}
	.empty-cart{
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		padding-top: 150px;
		.empty-img{
			height: 90px;
			width: 90px;
		}
		
		.empty-text{
			margin-top: 5px;
		}
	}
</style>
